<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta charset="utf-8">
	<meta content="" name="description">
	<meta content="" name="keywords">
	<meta content="eric.wu" name="author">
	<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
	<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
	<meta content="no-cache" http-equiv="pragma">
	<meta content="0" http-equiv="expires">
	<meta content="telephone=no, address=no" name="format-detection">
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<title>微喜帖</title>
	{php echo register_jssdk();}
	<script type="text/javascript" src="../addons/lxy_marry/template/js/jquery.js"></script>
	<script type="text/javascript" src="../addons/lxy_marry/template/js/easing.js"></script>
	<script type="text/javascript" src="../addons/lxy_marry/template/js/wedding.js"></script>
	<script type="text/javascript" src="../addons/lxy_marry/template/js/sys.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<link type="text/css" rel="stylesheet" href="../addons/lxy_marry/template/css/wedding.css" />
</head>
<body>

<style type="text/css">
	.loading {position: absolute;width: 100%;height: 100%;text-align: center;top: 0;left: 0;line-height: 100%;border: none;z-index: 9999;}
	.loading-part {position: absolute;padding: 0;margin: 0;width: 100%;height: 50%;background-color: #FFFFFF;z-index: 1;}
	.loading-part.top {top: 0;}
	.loading-part.bottom {bottom: 0;}
	.loading-panel {position: absolute;width: 200px;height: 82px;top: 50%;left: 50%;margin-top: -41px;margin-left: -100px;z-index: 2;}
	.loading-icon {position: relative;width: 50px;height: 50px;background: url('{$_W['siteroot']}addons/lxy_marry/template/img/love.gif') center center no-repeat;margin: auto;}
	.loading-text {position: relative;width: 200px;height: 32px;color: #fc8e65;text-align: center;line-height: 32px;margin: auto;}
	.cover {display: block;position: absolute;position: fixed;top: 0;left: 0;width: 100%;height: 100%;padding: 0;margin: 0;background-color: #A00908;box-shadow: 5px 5px 5px 10px rgba(0,0,0,.6);z-index: 999;}
	/*封面模版:t1*/
	.cover.t1 {min-height: 330px;background-color: #A00908;}
	.cover.t1 .slogan {position: absolute;width: 266px;height: 290px;left: 50%;margin-left: -133px;top: 50%;margin-top: -145px;}
	.cover.t1 .mask {position: absolute;width: 100%;height: 100%;background: url('{$_W['siteroot']}addons/lxy_marry/template/img/icons.png') 0 0 no-repeat;top: 0;left: 0;}
	.cover.t1 .head {position: absolute;width: 158px;height: 153px;top: 68px;left: 48px;background-repeat: no-repeat;background-size: cover;background-position: center;}
</style>

<div class="loading">
	<div class="loading-part top"></div>
	<div class="loading-part bottom"></div>
	<div class="loading-panel">
		<div class="loading-icon"></div>
		<div class="loading-text">幸福加载中...</div>
	</div>
</div>
<div class="cover t1">
	<div class="slogan">
		<div class="head" style="background-image:url('{if $item['donghua_pic']}{php echo tomedia($item['donghua_pic']);}{else}{php echo $this->geturl(3);}{/if}')"></div>
		<div class="mask"></div>
	</div>
</div>
<div class="container" style="top:-99999px;background:url({php echo tomedia($item['bg_pic']);});">
	<header>
		<div>
			<ul class="box">
				<li class="relative">
                        <span class="pic">
                            {if $item['art_pic']}
                            <img src="{php echo tomedia($item['art_pic']);}" />
                            {else}
                            <img src="{php echo $this->geturl(2);}" />'
                            {/if}
                        </span>
				</li>
				<li style="width:180px;">
					<div class="label">
						{if $item['is_front'] == '1'}
						<span><label>{$item['xl_name']}</label></span>
						<span><img src="../addons/lxy_marry/template/img/04.png" style="width:30px;" /></span>
						<span><label>{$item['xn_name']}</label></span>
						{else}
						<span><label>{$item['xn_name']}</label></span>
						<span><img src="../addons/lxy_marry/template/img/04.png" style="width:30px;" /></span>
						<span><label>{{$item['xl_name']}}</label></span>
						{/if}
						<div>
				</li>
				<li>
					<span id="playbox" class="btn_music" onclick="playbox.init(this).play();">
						<audio id="audio" autoplay="autoplay" loop src="{if $item['music']}{php echo tomedia($item['music']);}{else}{php echo $this->geturl(4);}{/if}"></audio>
					</span>
				</li>
			</ul>
		</div>
	</header>
	<section class="body">
		{if $item['video']}
		<style>#video iframe{width:100%; min-height:200px;}</style>
		<div id="video">
			{php echo html_entity_decode($item['video'])}
		</div>
		{/if}
		<div style="margin-bottom:15px;">
			{template 'slide'}
		</div>
		<div class="des">
			<h3  class="align_center">想说的话</h3>
			<p>{$item['word']}</p>
		</div>
		<div>
			<ul class="list_font">
				<li>
					<a href="{php echo $this->createMobileUrl('inputpwd',array('id'=>$item['id'],'type'=>1))}" class="tbox look-detail"><span>查看赴宴名单</span></a>
				</li>
				<li>
					<a href="{php echo $this->createMobileUrl('inputpwd',array('id'=>$item['id'],'type'=>2))}" class="tbox look-detail"><span>查看我的祝福</span></a>
				</li>
				<li>
					<a href="javascript:;" class="tbox">
						<div>{$item['hy_time']}</div>
						<div>
							<figure>
								<p><span><img src="../addons/lxy_marry/template/img/yh_time.png" /></span></p>
								<figcaption>宴会时间</figcaption>
							</figure>
						</div>
					</a>
				</li>
				<li>
					<a href="http://api.map.baidu.com/marker?location={$item['lat']},{$item['lng']}&title={$item['jw_addr']}&content={$item['jw_addr']}&output=html&src=|" class="tbox" target="_blank">
						<div>{$item['hy_addr']}</div>
						<div>
							<figure>
								<p><span><img src="../addons/lxy_marry/template/img/daohang.png" /></span></p>
								<figcaption>点此导航</figcaption>
							</figure>
						</div>
					</a>
				</li>
				<li>
					<a href="tel:{$item['tel']}" class="tbox">
						<div>{$item['tel']}</div>
						<div>
							<figure>
								<p><span><img src="../addons/lxy_marry/template/img/tel.png" /></span></p>
								<figcaption>接待电话</figcaption>
							</figure>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<ul class="btns_1 box">
				<li><a href="javascript:show(0);" >我要赴宴</a></li>
				<li><a href="javascript:show(1);" >送上祝福</a></li>
				<li><a href="javascript:show(2);window.scrollTo(0, -1);" >分享喜帖</a></li>
			</ul>
			<ul id="overlay_ul" class="overlay_ul">
				<li>
					<form id="form1" action="javascript:;" method="post">
						<input type="hidden" id="sid" name = "sid" value="{$item['id']}" />
						<table>
							<tr><td colspan="2"><label>我要赴宴</label></td></tr>
							<tr><td style="width:45px;">姓名</td><td><input type="text" name="userName" value="" /></td></tr>
							<tr><td>手机</td><td><input type="tel" name="telephone" value="" /></td></tr>
							<tr><td>人数</td><td><input type="number" name="count" /></td></tr>
							<tr><td colspan="2" style="text-align:center;" class="btns_1"><a href="javascript:submit1();" >提交</a></td></tr>
						</table>
					</form>
				</li>
				<li>
					<form id="form2" action="javascript:;" method="post">
						<input type="hidden" id="sid2" name="sid2" value="{$item['id']}" />
						<table>
							<tr><td colspan="2"><label>送上祝福</label></td></tr>
							<tr><td style="width:45px;">姓名</td><td><input type="text" name="userName" value="" /></td></tr>
							<tr><td>手机</td><td><input type="tel" name="telephone" value="" /></td></tr>
							<tr><td colspan="2"><textarea placeholder="这里写一些祝福语给{$item['xl_name']}和{$item['xn_name']}" style="width:100%;height:50px;" maxlength="100" name="content"></textarea></td></tr>
							<tr><td colspan="2" style="text-align:center;" class="btns_1"><a href="javascript:submit2();" >提交</a></td></tr>
						</table>
					</form>
				</li>
				<li style="text-align:right;height:100%!important;right:-15px;left:0px;background-color:rgba(62,78,78,0.7) " onclick="$('#overlay_ul').click();event.preventDefault(); return false;">
					<img src="../addons/lxy_marry/template/img/09.png" style="width:260px;" />
				</li>
				<li style="text-align:right;" onclick="$('#overlay_ul').click();event.preventDefault(); return false;">
					<img src="../addons/lxy_marry/template/img/10.png" style="width:260px;" />
				</li>
			</ul>
		</div>
	</section>
</div>
<div style="height:8px;"></div>
{php $wxzf_url=$_W['siteroot'].'app'.ltrim($this->createMobileUrl('detail',array('id'=>$item['id'])),'.');}
</body>
</html>

<script type="text/javascript">
	// 微喜帖分享
	wx.ready(function () {
		sharedata = {
			title: "{$item['sendtitle']}",
			desc: "{$item['senddescription']}",
			link: "{php echo $wxzf_url}",
			imgUrl: "{if $item['suolue_pic']}{php echo tomedia($item['suolue_pic']);}{else}{php echo $this->geturl(3);}{/if}"
		};
		wx.onMenuShareAppMessage(sharedata);
		wx.onMenuShareTimeline(sharedata);
	});
</script>

<script type="text/javascript">
	$(function(){
		playbox.init("playbox");
		$("#overlay_ul").bind("click", function(evt){
			if("UL" == evt.target.nodeName){
				this.className = 'overlay_ul';
				$(this).find('li').removeClass('on');
			}
		});
	});
	function show(i){
		$("#overlay_ul>li").removeClass("on")[i].className = "on";
		$("#overlay_ul").addClass("on");
	}
	function submit1(){
		var form1 = document.getElementById("form1");
		var sid   = form1.sid.value;
		var userName = form1.userName.value;
		var telephone = form1.telephone.value;
		var count = form1.count.value;
		if(userName.length<1){
			alert("请输入姓名！");
			return;
		}
		if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(telephone))){
			alert("请输入正确的手机号码！");
			return;
		}
		if(count.length<1){
			alert("请输入人数！");
			return;
		}
		if(isNaN(count)== true){
			tusi('预订人数需为数字。');
			return ;
		}
		$.post('{php echo $this->createMobileUrl('ajaxsubmit',array('type'=>1,'fromuser'=>$fromuser))}',{ tel:telephone,un:userName,sid:sid,rs:count},function(m){
			alert(m);
			//location.reload(true);
			form1.reset();
			$("#overlay_ul").removeClass("on");
		},"html");
	}

	function submit2(){
		var form2 = document.getElementById("form2");
		var userName = form2.userName.value;
		var telephone = form2.telephone.value;
		var content = form2.content.value;
		var sid   = form2.sid2.value;
		if(userName.length<1){
			alert("请输入姓名！");
			return;
		}
		if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(telephone))){
			alert("请输入正确的手机号码！");
			return;
		}
		if(content.length>50){
			alert("内容不能大于50个字！");
			return;
		}
		if(content.length<1){
			alert("请输入祝福内容！");
			return;
		}
		$.post('{php echo $this->createMobileUrl('ajaxsubmit',array('type'=>2,'fromuser'=>$fromuser))}',{ tel:telephone,un:userName,sid:sid,zhufu:content},function(m){
			alert(m);
			form2.reset();
			$("#overlay_ul").removeClass("on");
		});
	}
</script>

<script type="text/javascript">
	$(function () {
		var $loading = $('.loading'),
				$parts = $('.loading-part', $loading),
				height = $parts.height();
		var $loadingpanel = $('.loading-panel', $loading);
		var $cover = $('.cover');
		function closeLoading(callback) {
			$loadingpanel.fadeOut(function () {
				$loading.remove();
			});
			if (typeof callback === 'function') {
				callback.call(this);
			}
		}
		function closeCover() {
			$cover.animate({
				'top': -$cover.height()
			}, 'linear', function () {
				$cover.remove();
			});
		}
		var handler_touch = function (e) {
			closeCover();
			e.preventDefault();
			return false;
		};
		//处理封面
		function initCover() {
			$cover.one('touchstart MSPointerDown', handler_touch);
			if (window.navigator.msPointerEnabled !== undefined) {
				window.setTimeout(function () {
					closeCover();
				}, 2000);
			}
		}
		closeLoading(function () {
			initCover();
			$cover.fadeIn(1500, function () {
				$cover.animate({
					top: '-2250px'
				}, 'easeOutBack', function () {

					$cover.animate({
						top: 0
					}, 500, 'easeOutElastic', function () {$('.container').css('top', '0px'); });
				});
			});
		});
	});
	function stop_audio(){
		var myVid=document.getElementById("audio");
		if (myVid.readyState == 3){
			myVid.pause();
		}else{
			myVid.play();
		}
	}
</script>


<div class="des">
	{$item['copyright']}
</div>